<template>
    <vdr
            :w="width"
            :h="height"
            :x="x"
            :y="y"
            :z="z"
            v-on:dragging="onDrag"
            v-on:resizing="onResize"
            v-on:resizestop="onResizeStop"
            v-on:dragstop="onDragStop"
            :parent="true"
            :snap="true"
            :snapTolerance="20"
    >
        <img src="../assets/logo.png" class="img" v-if="type == 'img'">
        <video controls class="img" v-else>
            <source src="../assets/snsdyvideodownload.mp4" type="video/mp4">
            您的浏览器不支持 HTML5 video 标签。
        </video>
    </vdr>
</template>

<script>
    import vdr from 'vue-draggable-resizable-gorkys'
    import 'vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css'
    export default {
        name: "myVdr",
        components: {vdr},
        props: {
            type:{
                type:String,
                default:'img'
            },
            width:{
                type: [Number, String],
                default: 100,
                validator: (val) => {
                    if (typeof val === 'number') {
                        return val > 0
                    }
                    return val === 'auto'
                }
            },
            height: {
                type: [Number, String],
                default: 100,
                validator: (val) => {
                    if (typeof val === 'number') {
                        return val > 0
                    }
                    return val === 'auto'
                }
            },
            x: {
                type: Number,
                default: 0
            },
            y: {
                type: Number,
                default: 0
            },
            z: {
                type: [String, Number],
                default: 'auto',
                validator: (val) => (typeof val === 'string' ? val === 'auto' : val >= 0)
            },
            index: {
                type: Number,
                default: 0
            }
        },
        data(){
            return {
            }
        },
        methods:{
            onResizeStop(x, y, width, height){
                this.$emit('onResizeStop', x, y, width, height,this.index)
            },
            onDragStop(x, y){
                this.$emit('onDragStop', x, y,this.index)
            },
            onResize: function (x, y, width, height) {
                this.$emit('onResize', x, y, width, height,this.index)
            },
            onDrag: function (x, y) {
                this.$emit('onDrag', x, y,this.index)
            }
        }
    }
</script>

<style scoped>
    .img{
        width: 100%;
        height: 100%;
    }
</style>
